<template>
  <div class="login-container flex-b-r">
    <div :class="[ele == 1 ? 'login-body' : 'login-body-bind']">
      <div class="Toggle">
        <div class="Toggle_placeholder"></div>
        <div class="Toggle_left">
          <div
            :class="[ele == 1 ? 'btn_Select' : 'btn_Unchecked']"
            @click="handelEle(1)"
          >
            新建
          </div>
        </div>
        <div class="Toggle_cen"></div>
        <div class="Toggle_right">
          <div
            :class="[ele == 2 ? 'btn_Select' : 'btn_Unchecked']"
            @click="handelEle(2)"
          >
            绑定
          </div>
        </div>
      </div>
      <div :class="[ele == 1 ? 'module_slot' : 'module_slot_bind']">
        <Firmnew v-if="ele == 1"></Firmnew>
        <Bindnew v-if="ele == 2"></Bindnew>
      </div>
    </div>
    <div class="p_record">
      <!-- <p>Copyright © 2024 XXXXXX 京ICP备XXXXXXXX号京ICP证XXXXXX号</p> -->
    </div>
  </div>
</template>

<script>
import Firmnew from "./components/firmnew.vue";
import Bindnew from "./components/bindnew.vue";
export default {
  // 组件名称
  name: "Login",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    Firmnew,
    Bindnew,
  },
  // 组件状态值
  data() {
    return {
      input: "",
      ele: "1", // 性别选择
    };
  },
  // 组件初始化
  created() {},
  // 组件实例挂载完毕
  mounted() {},
  //销毁事件
  destroyed() {},
  // 组件方法
  methods: {
    handelEle(num) {
      this.ele = num;
    },
  },
};
</script>

<style scoped lang="less">
// 主体内容
.login-container {
  min-width: 1230px !important;
  height: 100%;
  min-height: 740px;
  display: flex;
  background-color: #b5d6f5;
  // 中心白色区域
  .login-body {
    min-width: 1130px;
    min-height: 700px !important;
    font-size: 16px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 3px #a8c7e4;
    display: flex;
    flex-direction: column;
  }
  .login-body-bind {
    min-width: 1130px;
    min-height: 600px !important;
    font-size: 16px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 3px #a8c7e4;
    display: flex;
    flex-direction: column;
  }
  .Toggle {
    width: 100%;
    min-height: 130px;
    display: flex;
    .Toggle_placeholder {
      width: 37%;
    }
    .Toggle_left {
      width: 12%;
      display: flex;
    }
    .Toggle_right {
      width: 12%;
      display: flex;
    }
    .Toggle_cen {
      width: 4%;
    }
  }
  .module_slot {
    width: 100%;
    min-height: 550px;
  }
  .module_slot_bind {
    width: 100%;
    min-height: 450px;
  }
  // 切换新建/绑定样式
  .btn_Unchecked {
    width: 120px;
    height: 60px;
    border-radius: 5px;
    color: #ffffff;
    background-color: #9a9a9a;
    margin: auto;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 60px;
    cursor: pointer;
  }
  .btn_Select {
    width: 120px;
    height: 60px;
    border-radius: 5px;
    color: #ffffff;
    background-color: #3291f8;
    margin: auto;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 60px;
    cursor: pointer;
  }
  // 下方备案号 版权
  .p_record {
    width: 100%;
    position: absolute;
    font-size: 18px;
    height: 20px;
    bottom: 30px;
    display: flex;
    p {
      margin: auto;
    }
  }
}
</style>
